<template>
  <a-modal
    v-model="showModalPri"
    ref="selectGroup"
    width="70%"
    :title="'分组配置'"
    @cancel="onCancel"
  >
    <div>
      <a-table
        :loading="loading"
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="groupList"
        :scroll="{ x: 1000 }"
        :rowKey="(record) => record.resourceGroupCode"
      >
        <template slot-scope="text, record" slot="opt">
            <a-space>
              <a-button type="primary" @click="optDetail(record, 'preview')">查看</a-button>
              <a-button type="primary" :disabled="!initChecked" @click="optDetail(record)">编辑</a-button>
            </a-space>
          </template>
      </a-table>
      <selected-draw
        v-show="visible"
        :visible="visible"
        :selectDrawPreview="selectDrawPreview"
        :resourceGroupCode="resourceGroupCode"
        :departmentId="departmentIdPri"
        @closeDraw="closeDraw"
      ></selected-draw>
    </div>
    <template #footer>
      <a-button @click="onCancel">取消</a-button>
      <a-button :disabled="initChecked" type="primary" @click="onSave">确定</a-button>
    </template>
  </a-modal>
</template>
<script>
import { addResourceGroup } from "@/services/group";
import selectedDraw from "./selectedDraw.vue";
import { storeQiankun } from 'if-qiankun-config'

const qianKunInstance = storeQiankun.Instance

export default {
  name: "selectGroup",
  props: ['showModal', 'groupList', 'departmentId'],
  components: {
    selectedDraw
  },
  data() {
    return {
      selectResourceGroupCode: [],
      selectDrawPreview: true,
      loading: true,
      visible: false,
      resourceGroupCode: '',
      columns: [
        {
          title: '分组资源名称',
          dataIndex: 'resourceGroupName',
          key: 'resourceGroupName'
        },
        {
          title: '分组资源编码',
          dataIndex: 'resourceGroupCode',
          key: 'resourceGroupCode'
        },
        {
          title: '操作',
          key: 'opt',
          dataIndex: 'opt',
          scopedSlots: { customRender: 'opt' }
        }
      ],
      initChecked: undefined // 初始化的时候，是否是选中的标识
    };
  },
  watch: {
    groupList(newVal) {
      const list = []
      newVal.forEach(((item) => {
        if (item.checked === 1) {
          list.push(item.resourceGroupCode)
        }
      }));
      this.selectResourceGroupCode = list;
      if (typeof this.initChecked === 'undefined') {
        this.initChecked = !!list.length
      }
      this.loading = false;
    }
  },
  computed: {
    departmentIdPri: {
      get() {
        return this.departmentId;
      },
      set() {}
    },
    showModalPri: {
      get() {
        return this.showModal;
      },
      set() {}
    },
    rowSelection() {
      return {
        getCheckboxProps: record => ({
          props: {
            disabled: record.checked === 1, // Column configuration not to be checked
            name: record.name
          }
        }),
        selectedRowKeys: this.selectResourceGroupCode,
        onChange: this.onSelectChange,
        type: 'radio'
      };
    }
  },
  mounted() {
  },
  methods: {
    async onSave() {
      // 1. 对提交的code进行非空校验
      let passFlag = false;
      this.selectResourceGroupCode.some((item)=>{
        if (item) {
          passFlag = true;
          return true;
        }
        return false;
      });
      if (!passFlag) {
        this.$message.warning('请勾选分组资源!');
        return;
      }
      // 2. 进行提交
      const { data } = await addResourceGroup({
        resourceGroupCode: this.selectResourceGroupCode,
        departmentId: this.departmentIdPri
      });
      this.$emit('closeGroup', false) // 关闭弹窗
      if (data.code !== 200) {
        this.$message.error('配置失败: ' + data.message)
        return;
      }
      this.$message.success('配置成功！')
      // 刷新一下列表
      this.$emit("success");
      // 和父应用进行通信
      if (qianKunInstance.state.value.departmentId === this.departmentIdPri) {
        // 设置当前状态
        Object.assign(qianKunInstance.state.value, {
          smallTenancyStatus: 1
        });
        qianKunInstance.actions.setGlobalState(qianKunInstance.state);
      }
    },
    async show() {
      this.showModalPri = true;
      this.$refs.selectGroup?.clearValidate();
    },
    onCancel() {
      this.showModalPri = false;
      this.$emit('closeGroup', false)
      // 和父应用进行通信
      if (qianKunInstance.state.value.departmentId === this.departmentIdPri) {
          // 设置当前状态
          Object.assign(qianKunInstance.state.value, {
            smallTenancyStatus: 2,
            userName: qianKunInstance.state.value.enterpriseList[0].name
          });
          qianKunInstance.actions.setGlobalState(qianKunInstance.state);
        }
    },
    optDetail(row, type) {
      this.selectDrawPreview = false
      if (type === 'preview') {
        this.selectDrawPreview = true
      }
      this.visible = true;
      this.resourceGroupCode = row.resourceGroupCode
    },
    closeDraw() {
      this.visible = false;
    },
    checkHasItem(arr, code) {
      return arr.some(item => item.code === code)
    },
    onChange() {
    },
    onSelectChange(selectedRowKeys) {
      selectedRowKeys = selectedRowKeys.filter(Boolean)
      const item = selectedRowKeys[selectedRowKeys.length - 1]
      this.selectResourceGroupCode = [item]
    }
  }
};
</script>
<style lang="less" scoped>
.group-title {
  padding-bottom: 10px;
  font-weight: 500;
}
/deep/.ant-table-thead {
  .ant-table-selection-column {
    .ant-table-selection {
      display: none;
    }
  }
}
</style>
